<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
	<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/shouye.png}">
	<meta charset="utf-8" />
	<title>网上购物商城</title>
	<!--swiperCSS-->
	<link rel="stylesheet" type="text/css" th:href="@{/css/swiper-4.3.5.min.css}"/>
	<!--自己轮播CSS-->
	<link rel="stylesheet" type="text/css" th:href="@{/css/homepage-lun1.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/homepage-lun2.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/homepage-lun3.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/head.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}"/>
	<script th:src="@{/js/jquery-3.3.1.min.js}"></script>
	<script th:src="@{/js/swiper-4.3.5.min.js}" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		#recommendLocal a:hover{
			color: #b4a078;
		}
	</style>
</head>

<body class="relative">
<div th:replace="head::topbar"></div>

<!-- Swiper -->
<div class="swiper-container a">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="banner"  th:style="'background:url('+'/img/home-pagelun1.jpg'+');'"></div>
		</div>
		<div class="swiper-slide">
			<div class="banner" th:style="'background:url('+'/img/home-pagelun2.jpg'+');'"></div>
		</div>
		<div class="swiper-slide">
			<div class="banner" th:style="'background:url('+'/img/home-pagelun3.jpg'+');'"></div>
		</div>
		<div class="swiper-slide">
			<div class="banner" th:style="'background:url('+'/img/home-pagelun4.jpg'+');'"></div>
		</div>
		<div class="swiper-slide">
			<div class="banner" th:style="'background:url('+'/img/home-pagelun5.jpg'+');'"></div>
		</div>
		<div class="swiper-slide">
			<div class="banner" th:style="'background:url('+'/img/home-pagelun6.jpg'+');'"></div>
		</div>
		<div class="swiper-slide">
			<div class="banner" th:style="'background:url('+'/img/home-pagelun7.jpg'+');'"></div>
		</div>
		<div class="swiper-slide">
			<div class="banner" th:style="'background:url('+'/img/home-pagelun8.jpg'+');'"></div>
		</div>
	</div>
	<!-- Add Pagination -->
	<div class="swiper-pagination"></div>
	<!-- Add Arrows -->
	<div class="swiper-button-next"></div>
	<div class="swiper-button-prev"></div>
</div>
<!--轮播之下-->
<!--板块1-->
<div class="container">
	<div class="producter-head clearfix">
		<div class="producter-head-l fl clearfix">
			<h3>品牌制造商</h3>
			<small>工厂直达消费者，剔除品牌溢价</small>
		</div>
		<div class="producter-head-r fr">更多制造商 ></div>
	</div>
	<div class="producter-manu clearfix">
		<div class="producter-manu-item relative">
			<img th:src="@{/img/producter1.png}"class="tran6"/>
			<div class="producter-name absolute relative">
				<span>海外制造商</span>
				<span class="icon-pro-ab absolute">上新</span>
			</div>
			<div class="producter-fee absolute">9.9元起</div>
		</div>
		<div class="producter-manu-item relative">
			<img th:src="@{/img/producter2.png}"class="tran6"/>
			<div class="producter-name absolute relative">
				<span>Armani制造商</span>
			</div>
			<div class="producter-fee absolute">199元起</div>
		</div>
		<div class="producter-manu-item relative">
			<img th:src="@{/img/producter3.png}"class="tran6"/>
			<div class="producter-name2 absolute relative">
				<span>CK制造商</span>
				<span class="icon-pro-ab absolute">上新</span>
			</div>
			<div class="producter-fee2 absolute">25元起</div>
		</div>
		<div class="producter-manu-item relative">
			<img th:src="@{/img/producter4.png}"class="tran6"/>
			<div class="producter-name2 absolute relative">
				<span>新秀丽制造商</span>
			</div>
			<div class="producter-fee2 absolute">49元起</div>
		</div>
	</div>
</div>
<!--板块2-->
<div class="container" style="padding-top: 60px;">
	<div class="producter-head clearfix">
		<div class="producter-head-l fl clearfix">
			<h3>新品首发</h3>
			<small>为你寻觅世间好物</small>
		</div>
		<div class="producter-head-r fr">更多新品 ></div>
	</div>
	<!-- Swiper -->
	<div class="swiper-container b">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="sw-pro-item relative tran6" th:each="pls,itemStat :${productList}" th:if="${itemStat.count}<=4">
					<a th:href="@{/product/goods-details(productId=${pls.productId})}">
						<img style="width: 262.5px;height: 262.5px;  max-width: 100%;max-height: 100%; " th:src="@{${pls.imgSrc}}"/>
						<div class="sw-pro-item-bd">
							<div class="item-bd-f">
								<span>满赠</span>
							</div>
							<h4 th:text="${pls.productName}"></h4>
							<p>
								￥<span th:text="${pls.productPrice}"></span>
							</p>
						</div>
						<div class="bankuaihover absolute tran6"></div>
					</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="sw-pro-item relative tran6" th:each="pls,itemStat :${productList}" th:if="${itemStat.count > 4 && itemStat.count <= 8}" >
					<a th:href="@{/product/goods-details(productId=${pls.productId})}">
						<img style="width: 262.5px;height: 262.5px;  max-width: 100%;max-height: 100%; " th:src="@{${pls.imgSrc}}"/>
						<div class="sw-pro-item-bd">
							<div class="item-bd-f">
								<span>满赠</span>
							</div>
							<h4 th:text="${pls.productName}"></h4>
							<p>
								￥<span th:text="${pls.productPrice}"></span>
							</p>
						</div>
						<div class="bankuaihover absolute tran6"></div>
					</a>
				</div>
			</div>
		</div>
		<!-- Add Arrows -->
		<div class="swiper-button-next" style="right: 15px;transform: scale(1.2);"></div>
		<div class="swiper-button-prev" style="left: 15px;transform: scale(1.2);"></div>
	</div>
</div>
<!--板块3-->
<div class="bankuai3bac">
	<div class="container">
		<div class="producter-head clearfix">
			<div class="producter-head-l fl clearfix">
				<h3>猜你喜欢</h3>
				<ul class="clearfix fl">
				</ul>
			</div>
			<div class="producter-head-r fr"></div>
		</div>
		<div id="recommendLocal" class="recommend-box clearfix"th:if="${session.recommendProducts==null}">
			<div class="recommend-l fl"  th:each="pls,itemStat :${productList}" th:if="${itemStat.count}<=1">
				<a th:href="@{/product/goods-details(productId=${pls.productId})}">
					<div class="recommend-l-t">
						<img th:src="@{${pls.imgSrc}}" style="width: 100%;height: 100%;" class="tran6"/>
					</div>
					<div class="recommend-l-b1">
						<span>爆品</span>
					</div>
					<h4 th:text="${pls.productName}" style="text-align: center">28寸 纯PC“铝框”（非全铝）拉杆箱</h4>
					<p th:text="'¥'+${pls.productPrice}" style="text-align: center">¥439</p>
				</a>
			</div>
			<div class="recommend-r fl" th:each="pls,itemStat :${productList}" th:if="${itemStat.count>1&&itemStat.count<=7}">
				<a th:href="@{/product/goods-details(productId=${pls.productId})}">
					<div class="recommend-r-t">
						<img th:src="@{${pls.imgSrc}}" style="width: 100%;height: 100%;"  class="tran6"/>
					</div>
					<div class="recommend-r-b1">
						<span>爆品</span>
						<span>居家特惠</span>
					</div>
					<h4 th:text="${pls.productName}" style="text-align: center">AB面独立弹簧床垫 进口乳胶</h4>
					<p th:text="'¥'+${pls.productPrice}" style="text-align: center">¥2399</p>
				</a>
			</div>
		</div>
		<div class="recommend-box clearfix"th:if="${session.recommendProducts!=null}">
			<div class="recommend-l fl"  th:each="rp,itemStat :${session.recommendProducts}" th:if="${itemStat.count}<=1">
				<a th:href="@{/product/goods-details(productId=${rp.productId})}">
					<div class="recommend-l-t">
						<img th:src="@{${rp.imgSrc}}" style="width: 100%;height: 100%;" class="tran6"/>
					</div>
					<div class="recommend-l-b1">
						<span>爆品</span>
					</div>
					<h4 th:text="${rp.productName}" style="text-align: center">28寸 纯PC“铝框”（非全铝）拉杆箱</h4>
					<p th:text="'¥'+${rp.productPrice}" style="text-align: center">¥439</p>
				</a>
			</div>
			<div class="recommend-r fl" th:each="rp,itemStat :${session.recommendProducts}" th:if="${itemStat.count>1&&itemStat.count<=7}">
				<a th:href="@{/product/goods-details(productId=${rp.productId})}">
					<div class="recommend-r-t">
						<img th:src="@{${rp.imgSrc}}" style="width: 100%;height: 100%;"  class="tran6"/>
					</div>
					<div class="recommend-r-b1">
						<span>爆品</span>
						<span>居家特惠</span>
					</div>
					<h4 th:text="${rp.productName}" style="text-align: center">AB面独立弹簧床垫 进口乳胶</h4>
					<p th:text="'¥'+${rp.productPrice}" style="text-align: center">¥2399</p>
				</a>
			</div>
		</div>
	</div>
</div>
<!--板块4-->
<div class="time-buy">
	<div class="container clearfix">
		<div class="producter-head clearfix">
			<div class="producter-head-l fl clearfix">
				<h3>限时购</h3>
			</div>
			<div class="producter-head-r fr"><a href="/miaosha/miaosha-list" >更多抢购></a ></div>
		</div>
		<div class="time-buy-l relative fl">
			<div class="screen-hd">限时秒杀</div>
			<div class="screen-line"></div>
			<div class="screen-endtip">每日特享优惠</div>
			<!--倒计时部分-->
			<div class="screen-timebox">
				<span class="screen-time">00</span>
				<span class="screen-colon">:</span>
				<span class="screen-time">00</span>
				<span class="screen-colon">:</span>
				<span class="screen-time">00</span>
			</div>
			<span class="screen-seemore">查看全部&nbsp;&gt;</span>
			<a href="/activity/time-buy-list"></a>
		</div>

		<div class="time-buy-r fl clearfix" th:each="m,itemStatm:${miaoShas}" th:if="${itemStatm.count<= 4}">
			<div class="time-buy-r-left fl">
				<img th:src="@{${m.product.imgSrc}}" style="width: 100% ; height: 100%;" class="tran6"/>
			</div>
			<div class="time-buy-r-right fl">
				<h2 th:text="${m.product.productName}">20寸 纯PC“铝框”（非全铝）登机箱</h2>
				<p th:text="${m.product.getProductDescribe()}">40升适中容量，铝质包角，牢固抗摔</p>
				<div class="time-buy-r-right-num clearfix">
					<div class="time-buy-r-right-numBar fl relative">
						<div class="time-buy-r-right-numBarin"></div>
					</div>
					<div class="time-buy-r-right-numTips fl" th:text="'还剩'+${m.product.productCount}+'件'">还剩760件</div>
				</div>
				<div class="time-buy-r-right-price">
							<span class="aPrice">
								限时价
								<span class="price-yuan">¥</span>
							<span class="aPricein" th:text="${m.miaoshaPrice}">314</span>
							</span>
					<span class="oPrice">
								原价&nbsp;
								<span class="oPricein" th:text="${'¥'+m.product.productPrice}">¥349</span>
							</span>
				</div>
				<a th:href="@{/miaosha/miaosha-details(miaoshaId=${m.miaoshaId},productId=${m.productId})}" class="time-buy-r-right-mai">立即抢购</a>
			</div>
		</div>

	</div>
</div>
<!--板块5-->
<div class="welfarebox">
	<div class="container">
		<div class="producter-head clearfix">
			<div class="producter-head-l fl clearfix">
				<h3>福利社</h3>
			</div>
			<div class="producter-head-r fr"><a href="/activity/time-buy-list">查看全部福利></a> </div>
		</div>
		<div class="welfare-center clearfix">
			<!-- Swiper -->
			<div class="swiper-container c fl">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="banner" th:style="'background:url('+'/img/welfare1.jpg'+');'"></div>
					</div>
					<div class="swiper-slide">
						<div class="banner" th:style="'background:url('+'/img/welfare2.jpg'+');'"></div>
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
				<!-- Add Arrows -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>
			<!--轮播后面的-->
			<div class="welfare-list fl clearfix" style="background-color: white">
				<div class="time-buy-r fl clearfix" th:each="act,itemStatm:${activities}" th:if="${itemStatm.count<= 4}">
					<div class="time-buy-r-left fl">
						<img th:src="@{${act.product.imgSrc}}" style="width: 100% ; height: 100%;" class="tran6"/>
					</div>
					<div class="time-buy-r-right fl">
						<h2 th:text="${act.product.productName}">20寸 纯PC“铝框”（非全铝）登机箱</h2>
						<p th:text="${act.product.getProductDescribe()}">40升适中容量，铝质包角，牢固抗摔</p>
						<div class="time-buy-r-right-num clearfix">
							<div class="time-buy-r-right-numBar fl relative">
								<div class="time-buy-r-right-numBarin"></div>
							</div>
							<div class="time-buy-r-right-numTips fl" th:text="'还剩'+${act.product.productCount}+'件'">还剩760件</div>
						</div>
						<div class="time-buy-r-right-price">
							<span class="aPrice">
								限时价
								<span class="price-yuan">¥</span>
							<span class="aPricein" th:text="${act.discountPrice}">314</span>
							</span>
							<span class="oPrice">
								原价&nbsp;
								<span class="oPricein" th:text="${'¥'+act.product.productPrice}">¥349</span>
							</span>
						</div>
						<a th:href="@{/activity/time-buy-details(activityId=${act.activityId},productId=${act.productId})}" class="time-buy-r-right-mai">立即抢购</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--板块6-->

<div th:replace="footer::#footbar"></div>

<script type="text/javascript">
	$(document).ready(function() {
		//底部侧边栏关闭
		$(".icon-sidebarx").click(function() {
			$(this).parents(".sidebar-b-bac").remove();
		});
		//右边侧边栏关闭
		$(".icon-subx").click(function() {
			$(this).parents(".sub-list").css("display", "none");
		});
		//右边hover弹窗input隐藏出现
		$(".sub-inputbox").click(function() {
			$(this).prev(".icon-inputx").css("opacity", 1);
		});
		//下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
		$(window).scroll(function() {
			var top = $(document).scrollTop();
			if(top > 200) {
				$(".sidebar-r-totop").css({
					display: 'block'
				});
				$(".navigation-fix").slideDown();
			} else {
				$(".sidebar-r-totop").css({
					display: 'none'
				});
				$(".navigation-fix").slideUp();
			}
		});
		//点击回到顶部，回到顶部
		$(".sidebar-r-totop").click(function() {
			$("html,body").animate({
				scrollTop: 0
			}, 500);
		});

	})
</script>
<!-- Initialize Swiper -->

<script>
	var swiper = new Swiper('.a', {
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
			delay: 2500,
			disableOnInteraction: false,
		},
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});
</script>
<!-- Initialize Swiper -->
<script>
	var swiper = new Swiper('.b', {
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});
</script>
<!-- Initialize Swiper -->
<script>
	var swiper = new Swiper('.c', {
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
			delay: 2500,
			disableOnInteraction: false,
		},
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});
</script>
<!--板块3的选项卡-->
<script type="text/javascript">
	$(document).ready(function() {
		$("#header").load("footer.html");
		$("#footer").load("footer.html");
		$("#personal-left").load("personal-left.html");
		$(".producter-head-l li").eq(0).click(function() {
			$(".producter-head-l li").css("border-bottom", "none");
			$(this).css("border-bottom", "2px solid #B4A078");
			$(this).parents(".producter-head").siblings(".recommend-box").css("display", "none");
			$(this).parents(".producter-head").siblings(".recommend-box").eq(0).css("display", "block");
		});
		$(".producter-head-l li").eq(1).click(function() {
			$(".producter-head-l li").css("border-bottom", "none");
			$(this).css("border-bottom", "2px solid #B4A078");
			$(this).parents(".producter-head").siblings(".recommend-box").css("display", "none");
			$(this).parents(".producter-head").siblings(".recommend-box").eq(1).css("display", "block");
		});
		$('.producter-manu-item:nth-child(1)').click(function () {
			$(location).attr("href","goods-details.html");
		});
		$('.producter-manu-item:nth-child(2)').click(function () {
			$(location).attr("href","goods-details3.html");
		});
		$('.producter-manu-item:nth-child(3)').click(function () {
			$(location).attr("href","goods-details.html");
		});
		$('.producter-manu-item:nth-child(4)').click(function () {
			$(location).attr("href","goods-details3.html");
		});
		$(".recommend-l").click(function () {
			$(location).attr("href","goods-details.html");
		});
		$(".recommend-r").click(function () {
			$(location).attr("href","goods-details3.html");
		});
		$(".time-buy-l").click(function () {
			$(location).attr("href","goods-details3.html");
		})
		$(".time-buy-r img").click(function () {
			$(location).attr("href","goods-details.html");
		})
		$(".welfare-list-l-bd-item img").click(function () {
			$(location).attr("href","goods-details.html");
		});
		$(".welfare-list-r-bd-item img").click(function () {
			$(location).attr("href","goods-details3.html");
		});
	});
</script>
</body>

</html>